<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>实习人员管理</h2>
        </template>
      </PageTitle>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleClick">
        <el-menu-item index="0">全部</el-menu-item>
        <el-menu-item index="1">绑定实习基地</el-menu-item>
        <el-menu-item index="2">未绑定实习基地</el-menu-item>
      </el-menu>
      <!-- 搜索筛选 -->
      <el-row :gutter="10" style="margin-top:20px">
        <el-col :span="3">
          <el-input v-model="query.name" type="text" placeholder="输入姓名" />
        </el-col>
        <el-col :span="3">
          <el-input v-model="query.phone" type="text" placeholder="输入手机号" />
        </el-col>
        <el-col :span="4">
          <el-input v-model="query.sub_name" type="text" placeholder="输入身份证号" />
        </el-col>
        <el-col :span="4">
          <el-input v-model="query.school" type="text" placeholder="输入学校" />
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.type" placeholder="选择学历" clearable @clear="() => { query.type=undefined } ">
            <el-option v-for="item in qualification" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" ooltip-effect="dark" border :data="list" max-height="500px" style="margin-top: 20px;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" fixed />
        <el-table-column label="ID" align="center" sortable width="60" prop="id" fixed />
        <el-table-column label="姓名" align="center" prop="full_name" fixed />
        <el-table-column label="手机号码" align="center" prop="phone" width="130" fixed />
        <el-table-column label="在读学校" align="center" prop="school" width="180" />
        <el-table-column label="学历" align="center" prop="qualification">
          <template slot-scope="{row}">
            {{ row.qualification|qualificationType }}
          </template>
        </el-table-column>
        <el-table-column label="实习企业数量" align="center" prop="practice_sum" width="120" />
        <el-table-column label="实习企业" align="center" prop="com_name" width="220" />
        <el-table-column label="基地认证" prop="is_practice" width="120" align="center">
          <template v-if="row.comid>0" slot-scope="{row}">
            <el-tag :type="row.is_practice|statusFilter">
              {{ row.is_practice|isPracticeType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实习岗位" align="center" prop="position" width="130" />
        <el-table-column label="实习状态" align="center" prop="qualification" width="120">
          <template v-if="row.comid>0" slot-scope="{row}">
            <el-tag :type="row.status_z|statusFilter">
              {{ row.status_z|statusZState }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实习开始时间" align="center" prop="start_at" width="160">
          <template slot-scope="{row}">
            {{ row.start_at|timeStanpYYMMDD }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" width="150" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="!checkPermission('Intern-show')" @click="addRole('edit',row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row type="flex" align="middle" style="margin-left: 20px;">
      <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
    </el-row>

    <RightPanel ref="panel" :click-not-close="true" :width="75">
      <div class="base">
        <div class="logo"><img alt="" :src="user_data.avatar|avatarType"></div>
        <div class="info">
          <div class="title">
            <div class="name">{{ practice_user.full_name }}</div>
          </div>
          <div class="details">
            <el-row class="line">
              <el-col :span="8">
                <label class="line_label">实习企业：</label>
                <span class="text"> {{ company.companyname }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">基地认证：</label>
                <el-tag v-if="practice_user.comid>0" :type="company.is_practice|statusFilter">
                  {{ company.is_practice|isPracticeType }}
                </el-tag>
              </el-col>
              <el-col :span="8">
                <label class="line_label">人员状态：</label>
                <el-tag v-if="practice_user.comid>0" :type="practice.status_z|statusFilter">
                  {{ practice.status_z|statusZState }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row class="line">
              <el-col :span="8">
                <label class="line_label">实习开始时间：</label>
                <span class="text"> {{ practice.start_at|timeStanpYYMMDD }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">实习结束时间：</label>
                <span class="text"> {{ practice.end_at|timeStanpYYMMDD }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">留用状态：</label>
                <el-tag v-if="practice.status===3&&practice_user.comid>0" type="info">未知</el-tag>
                <el-tag v-if="practice.status===1&&practice_user.comid>0" type="success">是</el-tag>
                <el-tag v-if="practice.status===2&&practice_user.comid>0" type="danger">否</el-tag>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="tab_box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人资料" name="1">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">个人资料</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice_user" label-width="140px">
                        <el-form-item label="姓名" prop="full_name">
                          <el-input v-model="practice_user.full_name" style="width: 50%;" disabled />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                          <el-input v-model="practice_user.phone" style="width: 50%;" :placeholder="$t('table.enterThe')+'手机号'" disabled />
                        </el-form-item>
                        <el-form-item label="有效身份证" prop="id_card">
                          <el-input v-model="practice_user.id_card" style="width: 50%;" disabled />
                        </el-form-item>
                        <el-form-item label="学校类型" prop="school_type">
                          <el-radio-group v-model.number="practice_user.school_type">
                            <el-radio :label="1">国内</el-radio>
                            <el-radio :label="2">国外</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="practice_user.school_type===1" label="学校所在城市">
                          <el-select v-model="practice_user.province" :placeholder="$t('table.selectThe')+'省份'" style="margin-right: 10px;" disabled>
                            <el-option v-for="(item,index) in provinceList" :key="index" :label="item.fullname" :value="item.fullname" />
                          </el-select>
                          <el-select v-model="practice_user.city" :placeholder="$t('table.selectThe')+'城市'" disabled>
                            <el-option v-for="(item,index) in city" :key="index" :label="item.fullname" :value="item.fullname" />
                          </el-select>
                        </el-form-item>
                        <el-form-item v-if="practice_user.school_type===2" label="学校所在国家" prop="province">
                          <el-input v-model="practice_user.province" style="width: 50%;" :placeholder="$t('table.enterThe')+'学校所在国家'" disabled />
                        </el-form-item>
                        <el-form-item label="在读学校" prop="school">
                          <el-select v-model="practice_user.school" placeholder="请选择在读学校" style="width:50%" disabled>
                            <el-option v-for="item in filteredOptions" :key="item.id" :value="item.name" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="学历" prop="qualification">
                          <el-select v-model.number="practice_user.qualification" placeholder="请选择学历" disabled>
                            <el-option v-for="item in qualification" :key="item.id" :label="item.name" :value="item.id" />
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="tables">
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice_user" label-width="140px">
                        <el-form-item label="身份证正面" prop="id_card_left">
                          <ImageUpload ref="idCardLeftPhoto1" :is-true="true" />
                        </el-form-item>
                        <el-form-item label="身份证反面" prop="id_card_right">
                          <ImageUpload ref="idCardRightPhoto1" :is-true="true" />
                        </el-form-item>
                        <el-form-item label="学历证书" prop="qualification_img">
                          <ImageUpload ref="qualificationImgPhoto1" :is-true="true" />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收款信息" name="2">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">银行卡信息</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice_user" label-width="100px">
                        <el-form-item label="开户银行" prop="bank">
                          <el-input v-model="practice_user.bank" style="width: 50%;" disabled />
                        </el-form-item>
                        <el-form-item label="银行账号" prop="bank_no">
                          <el-input v-model="practice_user.bank_no" style="width: 50%;" disabled />
                        </el-form-item>
                        <el-form-item label="银行卡" prop="bank_img">
                          <ImageUpload ref="bankImgPhoto1" :is-true="true" />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="实习信息" name="3">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">实习信息</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice" label-width="100px">
                        <el-form-item label="实习岗位" prop="position">
                          <el-input v-model="practice.position" style="width: 50%;" :placeholder="$t('table.enterThe')+'实习岗位'" disabled />
                        </el-form-item>
                        <el-form-item label="实习开始时间" prop="start_at">
                          <el-date-picker v-model.number="practice.start_at" editable type="date" placeholder="实习开始时间" format="yyyyMMdd" value-format="timestamp" disabled />
                        </el-form-item>
                        <el-form-item label="实习结束时间" prop="end_at">
                          <el-date-picker v-model.number="practice.end_at" editable type="date" placeholder="实习结束时间" format="yyyyMMdd" value-format="timestamp" disabled />
                        </el-form-item>
                        <el-form-item label="留用状态" prop="status">
                          <el-radio-group v-model.number="practice.status">
                            <el-radio :label="3">未知</el-radio>
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="tables">
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice" label-width="100px">
                        <el-form-item label="实习佐证" prop="practice_img">
                          <ImagesListUpload ref="practiceImgPhoto" :is-true="true" />
                        </el-form-item>
                        <el-form ref="ruleForm" :model="practice" label-width="140px">
                          <el-form-item v-show="practice.status===1" label="留用证明" prop="status_img">
                            <ImagesListUpload ref="statusImgPhoto1" :is-true="true" />
                          </el-form-item>
                        </el-form>
                      </el-form></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="实习企业记录" name="4">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="24">
                  <div class="tables">
                    <div class="table_content">
                      <!-- 数据表 -->
                      <el-table border :data="companyLis" max-height="600px">
                        <el-table-column label="ID" align="center" sortable width="60" prop="id" fixed />
                        <el-table-column label="实习企业" align="center" prop="companyname" width="220" fixed />
                        <el-table-column label="基地认证" prop="is_practice" width="120" align="center">
                          <template v-if="row.comid>0" slot-scope="{row}">
                            <el-tag :type="row.is_practice|statusFilter">
                              {{ row.is_practice|isPracticeType }}
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="实习岗位" align="center" prop="position" />
                        <el-table-column label="实习状态" align="center" prop="qualification" width="120">
                          <template v-if="row.comid>0" slot-scope="{row}">
                            <el-tag :type="row.status_z|statusFilter">
                              {{ row.status_z|statusZState }}
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column label="实习开始时间" align="center" prop="start_at" width="180">
                          <template slot-scope="{row}">
                            {{ row.start_at|timeStanpYYMMDD }}
                          </template>
                        </el-table-column>
                        <el-table-column label="实习结束时间" align="center" prop="end_at" width="180">
                          <template slot-scope="{row}">
                            {{ row.end_at|timeStanpYYMMDD }}
                          </template>
                        </el-table-column>
                        <el-table-column label="是否留用" align="center" prop="status" width="160">
                          <template slot-scope="{row}">
                            {{ row.status|formIsUrl }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </el-col>

              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </RightPanel>
  </div>
</template>
<script>
import { GetPracticeUser, GetPracticUserInfo } from '@/api/user'
import province from '@/api/m_province'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'primary',
        3: 'warning'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activeName: '1',
      activeIndex: '0',
      downloadLoading: false,
      list: [],
      count: 0,
      qualification: [
        { id: 1, name: '大专' },
        { id: 2, name: '本科' },
        { id: 3, name: '硕士' },
        { id: 4, name: '博士' }
      ],
      statusData: [
        { id: 3, name: '未知' },
        { id: 1, name: '是' },
        { id: 2, name: '否' }
      ],
      query: {
        jid: undefined,
        name: '',
        sub_name: '',
        status: undefined,
        type: undefined,
        created_start: '',
        created_end: '',
        createtime_s: '',
        createtime_e: '',
        school: '',
        phone: '',
        com_name: '',
        page: 1,
        limit: 10
      },

      roleShowDialog: false,
      permData: [],
      defaultProps: {
        label: 'name'
      },
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: undefined, // 用来记录分配角色的id
      provinces: [],
      provinceList: [],
      city: [],
      school: [],
      value: '',
      inputValue: '',
      filteredOptions: [],
      showDialogS: false,
      adminInfo: {},
      imgUrl: { url: '', name: '' },
      fileList: [],
      practice: {},
      practice_user: {},
      user_data: {},
      company: {},
      companyLis: []
    }
  },
  created() {
    this.getInter()
  },
  methods: {
    // 获取实习人详情
    async getPracticeInfo(row) {
      this.activeName = '1'
      this.practice = {}
      this.practice_user = {}
      this.company = {}
      this.user_data = {}
      this.companyLis = []
      const one = {
        jid: row.id
      }
      const { practice, practice_user, user_data, company, list } = await GetPracticUserInfo(one)
      this.practice = practice
      this.practice_user = practice_user
      this.company = company
      this.user_data = user_data
      this.companyLis = list
      if (practice_user.province !== '') {
        var cur = 0
        province.RECORDS.forEach(item => {
          if (item.fullname === practice_user.province && item.pid === 0) {
            cur = item.cid
          }
        })
        this.city = []
        province.RECORDS.forEach(item => {
          if (item.pid === (cur / 1000)) {
            this.city.push(item)
          }
        })
        if (practice.start_at > 0) {
          this.practice.start_at = this.practice.start_at * 1000
        } else {
          this.practice.start_at = undefined
        }
        if (practice.end_at > 0) {
          this.practice.end_at = this.practice.end_at * 1000
        } else {
          this.practice.end_at = undefined
        }
      }
      this.openDialog()
    },
    // 保存选择对象
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(e) {
      this.query.jid = parseFloat(e)
      this.query.page = 1
      this.getInter()
    },
    // 获取列表
    async getInter() {
      this.downloadLoading = true
      const { count, list } = await GetPracticeUser(this.query)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getInter()
    },
    // 打开新增编辑
    addRole(type, row) {
      if (type === 'edit') {
        this.getPracticeInfo(row)
        this.$refs.panel.show = !this.$refs.panel.show
      }
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getInter()
    },
    // 给图片赋值
    openDialog() {
      if (this.practice_user.id_card_left) {
        const imgUrl = this.practice_user.id_card_left.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.idCardLeftPhoto1.fileList = NewArr
      }
      if (this.practice_user.id_card_right) {
        const imgUrl = this.practice_user.id_card_right.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.idCardRightPhoto1.fileList = NewArr
      }
      if (this.practice_user.qualification_img) {
        const imgUrl = this.practice_user.qualification_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.qualificationImgPhoto1.fileList = NewArr
      }
      if (this.practice_user.bank_img) {
        const imgUrl = this.practice_user.bank_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.bankImgPhoto1.fileList = NewArr
      }
      if (this.practice.status_img) {
        const imgUrl = this.practice.status_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.statusImgPhoto1.fileList = NewArr
      }
      if (this.practice.practice_img) {
        const imgUrl = this.practice.practice_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.practiceImgPhoto.fileList = NewArr
      }
    }
  }
}
</script>
<style scoped lang="scss">
.shopOrder-dialog{
  height: auto;
  max-height: 600px;
  overflow-y: auto;
}
.fujian-box{
  padding-bottom: 50px;
  label{
    font-size: 15px;
    font-weight: bold;
  }
  .item-xbox{
    flex-wrap: wrap;
  }
  .item-fujian{
    margin-top: 20px;
    margin-right: 10px;
    width: 14%;
    flex-direction: column;
    .item-img{
      width: 70%;
      img{
        width: 100%;
      }
    }
  }
  .item-title{
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
  }
}
.base{
  padding: 20px 30px;
  display: flex;
  .logo{
    width: 118px;
    height: 118px;
    margin-right: 20px;
    background-color: #ebeef5;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .info{
    flex: 1;
    .title{
      padding: 5px 0 18px;
      display: flex;
      .name{
        font-size: 20px;
        height: 20px;
        color: #303033;
        font-weight: 600;
        margin-right: 10px;
      }
      .user{
        padding-top: 6px;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        color: #777;
        .logoin{
          color: #0078ff;
          cursor: pointer;
        }
      }
      .qcc_box{
        width: 63px;
        height: 20px;
        position: absolute;
        right: 30px;
        z-index: 30;
        cursor: pointer;
        a{
          cursor: pointer;
          color: inherit;
          text-decoration: none;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .details{
      max-width: 100%;
      .line{
        margin-bottom: 15px;
        .line_label{
          color: #777;
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
        }
        .text{
          display: inline-block;
          font-size: 14px;
          line-height: 14px;
        }
        .text_color{
          color: #0078ff;
          cursor: pointer;
        }
      }
    }
  }
}
.bind_icon{
  display: inline-block;
  float: left;
  margin-right: 5px;
}
.tab_box{
  padding:0 30px;
}
.clientInfo_wrapper{
  height: calc(100vh - 246px);
    overflow-y: auto;
}
.tables{
  padding: 20px 0px;
}
  .title_t{
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
  }
  .table_content{
    margin-top: 30px;
  }
  .img_box{
    margin-top: 30px;
  }
  .btnOk-ljm{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
</style>
